<template>
  <div class="consultation-list">
    <van-nav-bar
      title="问诊记录"
      left-text="返回"
      left-arrow
      @click-left="onBack"
      fixed
    />

    <van-tabs 
      v-model:active="activeTab" 
      sticky 
      offset-top="46px"
      class="consultation-tabs"
    >
      <div class="loading-wrapper" v-if="loading">
        <van-loading type="spinner" color="#1989fa" />
      </div>
      <van-tab title="全部">
        <consultation-list :list="filterList(null)" />
      </van-tab>
      <van-tab title="问诊中">
        <consultation-list :list="filterList(1)" />
      </van-tab>
      <van-tab title="已完成">
        <consultation-list :list="filterList(2)" />
      </van-tab>
      <van-tab title="已取消">
        <consultation-list :list="filterList(3)" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import ConsultationList from './components/ConsultationList.vue'
import { getUserConsultations } from '@/api/consultation'
import { showToast } from 'vant'

const router = useRouter()
const activeTab = ref(0)
const allList = ref([])
const loading = ref(false)
const current = ref(1)
const size = ref(50) // 一次加载更多数据

// 获取所有问诊记录
const loadData = async () => {
  if (loading.value) return
  loading.value = true
  try {
    const { data } = await getUserConsultations({
      current: current.value,
      size: size.value
    })
    allList.value = data.records
  } catch (error) {
    showToast('获取问诊记录失败')
  } finally {
    loading.value = false
  }
}

// 根据状态筛选列表
const filterList = (status) => {
  if (status === null) return allList.value
  return allList.value.filter(item => item.status === status)
}

const onBack = () => {
  router.back()
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.consultation-list {
  height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  display: flex;
  flex-direction: column;
  
  .consultation-tabs {
    flex: 1;
    overflow: hidden;
    
    :deep(.van-tabs__content) {
      height: calc(100% - 44px);
      overflow-y: auto;
      background-color: #f7f8fa;
    }
    
    :deep(.van-tab__pane) {
      height: 100%;
    }
  }
  
  .loading-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }
}
</style> 